<template>
	<view class="main-box">
		<view class="navigator-bar" :style="style">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">动态</text>
		</view>
		<scroll-view class="dynamic-detail-list" scroll-y="true" :style="listHeight">
			<view class="user-info-box">
				<view class="avatar-box" @click="jumpToUserInfo()">
					<image class="avatar-img" :src="dynamic.avatar"></image>
					<image class="sex-img"
						:src="dynamic.sex === 0 ? '/static/portraitTagGirl-s.png' : '/static/portraitTagBoy-s.png'">
					</image>
				</view>
				<view class="user-info">
					<text class="name-text">{{ dynamic.nickName }}</text>
					<text class="other-text">{{ getTimeDiff(dynamic.createTime) }}小时前 {{ dynamic.place }}</text>
				</view>
				<view class="chat-button" v-if="dynamic.userId !== myInfo.id"
					@click="userInfo.follow ? chat() : followUser()">{{ userInfo.follow ? '私聊' : '关注' }}</view>
			</view>
			<view class="dynamic-content-box">
				<view class="content-text">{{ dynamic.content }}</view>
				<view class="img-item" @click="imagePreview(img)" v-for="img of imgs">
					<image class="swiper-img" mode="aspectFill" :src="img"></image>
				</view>
			</view>
			<view class="comment-box">
				<text class="comment-titel">全部评论 ({{ comments.length }})</text>
				<view class="no-comment" v-if="comments.length === 0">
					<image class="no-comment-img" src="/static/blankIcon.png"></image>
					<view class="no-comment-text">还没有用户评价</view>
				</view>
				<dynamic-comment-item v-for="comment of comments" :comment="comment"></dynamic-comment-item>
			</view>
		</scroll-view>
		<view class="comment-control" :style="bottom">
			<view class="input-box">
				<input class="comment-input" v-model="comment" placeholder="说点什么..." @confirm="sendComment()" />
			</view>
			<view class="send-button" @click="sendComment()">发送</view>
		</view>
	</view>
</template>

<script>
	import dynamicCommentItem from '../components/dynamicCommentItem.vue'

	export default {
		data() {
			return {
				style: 'margin-top: 0px;',
				listHeight: 'height: 100%',
				bottom: 'bottom: 0rpx',
				dynamic: {},
				imgs: [],
				pageNum: 1,
				comments: [],
				myInfo: {},
				userInfo: {},
				comment: ''
			};
		},
		components: {
			dynamicCommentItem
		},
		onLoad() {
			this.style = `margin-top: ${this.$safeTop}px`;
			this.listHeight = `height: calc(100vh - ${this.$safeTop}px - 218rpx - ${this.$safeBottom}px)`;
			this.bottom = `bottom: ${this.$safeBottom}px`;
			this.myInfo = this.$userInfo;
			uni.$on('dynamicDetail', (dynamic) => {
				this.dynamic = dynamic;
				if (dynamic.images) {
					this.imgs = dynamic.images.split(',');
				}
				if (this.myInfo.id !== this.dynamic.userId) {
					this.getUserInfo(this.dynamic.userId);
				}
				this.getComments('refresh');
			});
			uni.$on('commentClick', (comment) => {
				let index = this.comments.findIndex(item => item === comment);
				if (index !== -1) {
					this.comments[index].click = true;
					this.comments[index].clicks += 1;
				}
			});
		},
		methods: {
			jumpToUserInfo() {
				uni.navigateTo({
					url: '/pages/userDetai?userId=' + this.dynamic.userId
				})
			},
			chat() {

			},
			followUser() {
				const params = {
					userId: this.dynamic.userId,
					status: 1
				}
				this.$apis.followUser(params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '关注成功!',
							icon: 'success'
						});
						uni.$emit('followUser', this.dynamic);
					}
				})
			},
			back() {
				uni.navigateBack();
			},
			imagePreview(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			getComments(type) {
				const params = {
					pageSize: 50,
					pageNum: this.pageNum,
					dynamicId: this.dynamic.id,
					orderByColumn: 'create_time',
					isAsc: 'desc'
				}
				this.$apis.getComments(params).then((res) => {
					if (res.code === 0) {
						this.comments = res.data.list;
					}
				});
			},
			getUserInfo(id) {
				const params = {
					userId: id
				}
				this.$apis.checkUser(params).then(res => {
					if (res.code === 0) {
						this.userInfo = res.data;
					}
				});
			},
			sendComment() {
				const params = {
					dynamicId: this.dynamic.id,
					content: this.comment
				}
				this.$apis.comment(params).then(res => {
					if (res.code === 0) {
						this.comment = '';
						uni.showToast({
							title: '评论成功!',
							icon: 'success'
						})
						this.pageNum = 1;
						this.getComments('refresh');
					}
				})
			},
			getTimeDiff(startTime) {
				var new_date = new Date();
				var old_date = new Date(startTime);
				var diffMinutes = parseInt((new_date - old_date) / 1000 / 60);
				var hours = parseInt(diffMinutes / 60);
				var days = parseInt(diffMinutes / 60 / 24);
				var month = parseInt(diffMinutes / 60 / 24 / 31);
				var year = parseInt(diffMinutes / 60 / 24 / 31 / 12);
				let timeStr = diffMinutes + '分钟前';
				if (hours > 0) {
					timeStr = hours + '小时前';
				}
				if (days > 0) {
					timeStr = days + '天前';
				}
				if (month > 0) {
					timeStr = month + '个月前';
				}
				if (year > 0) {
					timeStr = yesr + '年前';
				}
				return timeStr;
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 86rpx;
				text-align: center;
			}
		}

		.dynamic-detail-list {
			width: 100%;

			.user-info-box {
				padding-top: 40rpx;
				width: 654rpx;
				margin-left: 48rpx;
				display: flex;
				align-items: center;

				.avatar-box {
					width: 80rpx;
					height: 80rpx;
					position: relative;

					.avatar-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
						background-color: aquamarine;
					}

					.sex-img {
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				.user-info {
					width: 400rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					padding: 0 32rpx 0 30rpx;

					.name-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}

					.other-text {
						font-size: 24rpx;
						font-weight: 400;
						margin-top: 8rpx;
						color: #999999;
					}
				}

				.chat-button {
					width: 112rpx;
					height: 64rpx;
					border-radius: 32rpx;
					border: 2rpx solid #F0F3F6;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					text-align: center;
					line-height: 64rpx;
				}
			}

			.dynamic-content-box {
				width: 654rpx;
				margin-left: 48rpx;
				margin-top: 32rpx;

				.content-text {
					width: 100%;
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					line-height: 44rpx;
					margin-bottom: 20rpx;
				}

				.img-item {
					width: 654rpx;
					height: 400rpx;
					margin-top: 12rpx;

					.swiper-img {
						width: 654rpx;
						height: 400rpx;
						border-radius: 28rpx;
					}

				}
			}

			.comment-box {
				margin-top: 48rpx;
				width: 654rpx;
				margin-left: 48rpx;

				.comment-titel {
					font-size: 32rpx;
					font-weight: bold;
					color: #222222;
				}

				.no-comment {
					width: 100%;
					padding: 60rpx 0 60rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.no-comment-img {
						width: 163rpx;
						height: 132rpx;
					}

					.no-comment-text {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 30rpx;
					}
				}
			}
		}

		.comment-control {
			position: absolute;
			left: 0;
			width: 100vw;
			height: 110rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-box {
				width: 534rpx;
				height: 80rpx;
				background: #F6F7F9;
				border-radius: 20rpx;
				margin-left: 32rpx;

				.comment-input {
					width: 500rpx;
					height: 80rpx;
					margin-left: 20rpx;
				}
			}

			.send-button {
				width: 120rpx;
				height: 80rpx;
				background: #FF5E2E;
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				margin-right: 32rpx;
			}
		}
	}
</style>
